<template>
  <div class="border-t border-gray-200 p-4">
    <textarea
      v-model="message"
      class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none"
      rows="1"
      placeholder="What's in your mind..."
      @keydown.enter.exact.prevent="handleSend"
    ></textarea>
    <div class="flex justify-end mt-2">
      <Button variant="primary" @click="handleSend">
        <SendIcon class="w-4 h-4 mr-2" />
        Send
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import Button from '../ui/Button.vue';
  import { SendIcon } from 'lucide-vue-next';

  const message = ref('');

  const emit = defineEmits<{
    (e: 'send', content: string): void;
  }>();

  const handleSend = () => {
    if (message.value.trim()) {
      emit('send', message.value.trim());
      message.value = '';
    }
  };
</script>
